<template>
  <view class="home u-flex-col">
    <view class="u-flex u-row-between u-p-20 name-btn">
      <text class="f-bold u-font-lg t-deep-green u-m-l-20">
        {{data.name}}
      </text>
      <text class="mining-green u-m-l-20">{{ data.people_no }}</text>
    </view>
    <scroll-view scroll-y style="height: calc(100% - 100rpx); width: 100%">
      <view class="swiper-div item-one u-flex-col">
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">基本信息</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="card-row">
              <u-cell-group :border="false">
                <u-cell-item
                  v-for="(item, index) in infoListOne"
                  title-width="170"
                  :border-bottom="false"
                  :key="index"
                  :title="item.name"
                  :title-style="{ color: '#333333' }"
                  :value-style="{
                    display: 'flex',
                    paddingLeft: '20rpx',
                    color: '#666666',
                  }"
                  :arrow="false"
                  :value="info[item.value]"
                ></u-cell-item>
              </u-cell-group>
            </view>
          </view>
        </u-card>
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">工作信息</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="card-row">
              <u-cell-group :border="false">
                <u-cell-item
                  v-for="(item, index) in infoListTwo"
                  title-width="160"
                  :border-bottom="false"
                  :key="index"
                  :title="item.name"
                  :title-style="{ color: '#333333' }"
                  :value-style="{
                    display: 'flex',
                    paddingLeft: '30rpx',
                    color: '#666666',
                  }"
                  :arrow="false"
                  :value="info[item.value]"
                ></u-cell-item>
              </u-cell-group>
            </view>
          </view>
        </u-card>
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">安全资格证书</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="card-row">
              <u-cell-group :border="false">
                <u-cell-item
                  v-for="(item, index) in certificateData"
                  title-width="160"
                  :border-bottom="false"
                  :key="index"
                  :title="item.certificateName"
                  :title-style="{ color: '#333333' }"
                  :value-style="{
                    display: 'flex',
                    paddingLeft: '30rpx',
                    color: '#666666',
                  }"
                  :arrow="true"
                  @click="goToDetail(item)"
                ></u-cell-item>
              </u-cell-group>
            </view>
          </view>
        </u-card>
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">工作简历</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="card-row">
              <u-parse :html="resume"></u-parse>
            </view>
          </view>
        </u-card>
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">培训经历</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="card-row">
              <u-parse :html="train"></u-parse>
            </view>
          </view>
        </u-card>
        <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0' }">
          <view slot="head">
            <view class="card-row u-flex u-row-between">
              <view class="card-row-title u-flex">
                <u-line
                  color="#014833"
                  direction="col"
                  :hair-line="false"
                  margin="0 20rpx 0 0"
                  length="40rpx"
                ></u-line>
                <text class="t-green f-bold u-font-lg">工作经历</text>
              </view>
            </view>
          </view>
          <view slot="body">
            <view v-if="timeArray.length !== 0" class="card-row time-box u-p-r-20 u-p-l-40 u-p-t-40 u-p-b-40">
              <u-time-line>
                <u-time-line-item nodeTop="50" v-for="(item, index) in timeArray" :key="index">
                  <template v-slot:node>
                    <view class="time-line-node"></view>
                  </template>
                  <template v-slot:content>
                    <u-card
                      class="u-m-l-0 u-m-t-0"
                      :border="false"
                      box-shadow="0px 0px 8px #ddd6d6"
                      :body-style="{ padding: '0 30rpx' }"
                      :show-head="false"
                    >
                      <view slot="body">
                        <view class="card-row u-flex-col u-p-t-20 u-p-b-30">
                          <view class="time-line-time u-p-t-20 u-p-b-20 t-section" v-if="i == 0">{{ item.entryDate }}</view>
                          <view class="time-line-time u-p-t-20 u-p-b-20 t-section" v-else>{{ item.changeDate }}</view>
                          <navigator hover-class="none" class="time-line-title t-title">{{ item.enterpriseName }} {{item.changeType}}</navigator>
                        </view>
                      </view>
                    </u-card>
                  </template>
                </u-time-line-item>
              </u-time-line>
            </view>
          </view>
        </u-card>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { BASE_IP, BASE_URL } from '@/utils/ip.js'
export default {
  name: 'index',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      info: {},
      imageUrlOrigin: '',
      imageUrlNow: '',
      train: '', //培训
      resume: '', //简历
      timeArray: [],
      infoListOne: [
        {
          name: '出生日期',
          value: 'birthdayStr'
        },
        {
          name: '性别',
          value: 'gender'
        },
        {
          name: '民族',
          value: 'national'
        },
        {
          name: '籍贯',
          value: 'nativePlaceName'
        },
        {
          name: '婚姻状况',
          value: 'maritalStatus'
        },
        {
          name: '学历',
          value: 'educationName'
        },
        {
          name: '毕业院校',
          value: 'graduatedSchool'
        },
        {
          name: '所学专业',
          value: 'major'
        },
        {
          name: '政治面貌',
          value: 'politicalStatus'
        },
        {
          name: '从业日期',
          value: 'practiseDateStr'
        },
        {
          name: '家庭联系人',
          value: 'familyContact'
        },
        {
          name: '联系人电话',
          value: 'familyPhone'
        },
        {
          name: '家庭地址',
          value: 'familyAddress'
        },
        {
          name: '联系电话',
          value: 'contactPhone'
        },
        {
          name: '电子邮件',
          value: 'email'
        }
      ],
      infoListTwo: [
        {
          name: '入职日期',
          value: 'entryDateStr'
        },
        {
          name: '工作部门',
          value: 'depName'
        },
        {
          name: '人员分类',
          value: 'classifyName'
        },
        {
          name: '工种',
          value: 'workType'
        },
        {
          name: '职务',
          value: 'postRecord'
        },
        {
          name: '技术职称',
          value: 'technicalTitleName'
        },
        {
          name: '干部职称',
          value: 'cadreTitleName'
        },
        {
          name: '办公电话',
          value: 'officePhone'
        },
        {
          name: '健康状况',
          value: 'healthCondition'
        }
      ],
      picList: {
        name: '基本信息',
        title: ['实名认证照片', '入井抓拍照片'],
        src: []
      },
      certificateData: [],
      pic_miss: require('@/static/image/picture_missing.png'),
      BASE_IP: '',
      BASE_URL: '',
      initSelectArray: {}
    }
  },
  mounted() {
    this.BASE_URL = BASE_URL
    this.BASE_IP = BASE_IP
    this.getData()
  },
  methods: {
    async getData() {
      this.$post('/en/employee/getSpacialDictData').then(data => {
        this.initSelectArray = data.body
        this.$get(
          `/admin/home/personnelOrientation/getPersonnelInfo?name=${this.data.name}&customerNo=${this.data.customer_no}&inTime=${this.data.in_time}`
        ).then(res => {
          if (res && res.body.employee) {
            this.info = res.body.employee
            this.certificateData = res.body.certificate
            this.timeArray = res.body.employeeChange
            if (this.info) {
              this.train = this.info.trainExperience
              this.resume = this.info.resume
              //性别
              this.initSelectArray.genderArray.forEach(element => {
                if (element.id == this.info.gender) {
                  this.info.gender = element.label
                }
              })
              //民族
              this.initSelectArray.nationalArray.forEach(element => {
                if (element.id == this.info.national) {
                  this.info.national = element.label
                }
              })
              //婚姻状况
              this.initSelectArray.maritalStatusArray.forEach(element => {
                if (element.id == this.info.maritalStatus) {
                  this.info.maritalStatus = element.label
                }
              })

              //政治面貌
              this.initSelectArray.politicalStatusArray.forEach(element => {
                if (element.id == this.info.politicalStatus) {
                  this.info.politicalStatus = element.label
                }
              })
              //技术职称
              this.initSelectArray.technicalTitleArray.forEach(element => {
                if (element.id == this.info.technicalTitle) {
                  this.info.technicalTitleName = element.label
                }
              })
              //干部职称
              this.initSelectArray.cadreTitleArray.forEach(element => {
                if (element.id == this.info.cadreTitle) {
                  this.info.cadreTitleName = element.label
                }
              })
              //干部职称
              this.initSelectArray.healthConditionArray.forEach(element => {
                if (element.id == this.info.healthCondition) {
                  this.info.healthCondition = element.label
                }
              })
            }
          }
        })
      })
      let params = {
        archivesType: '',
        materialType: '006',
        method: 'POST',
        relationId: this.info.id
      }
      await this.$post('/system/archives/findByType', params).then(data => {
        if (data.body) {
          if (data.body.length > 0) {
            // #ifdef  H5
            this.imageUrlOrigin = BASE_IP + BASE_URL + 'system/archives/preview/thumb/' + data.body[0].archivesUrl
            // #endif
            // #ifndef H5
            this.imageUrlOrigin = BASE_URL + 'system/archives/preview/thumb/' + data.body[0].archivesUrl
            // #endif
          }
        }
      })
      let filename = this.info.facePhotoUrl
      if (filename) {
        let bucket = filename.substring(0, 6)
        filename = filename.substring(7, filename.length)
        await this.$get(`/realTime/faceDiscern/getImg?bucket=${bucket}&fileName=${filename}`)
          .then(data => {
            if (data.body) {
              this.imageUrlNow = 'data:image/png;base64,' + data.body
            }
          })
          .catch(e => {})
      }
      this.picList.src.push(this.imageUrlOrigin, this.imageUrlNow)
    },
    viewPic(data, index) {
      uni.previewImage({
        current: index,
        urls: data,
        longPressActions: {}
      })
    },
    goToDetail(data) {
      uni.navigateTo({
        url: `/pages/monitoring/safeDetails?data=${JSON.stringify(data)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .name-btn {
    margin-top: 20rpx;
    width: 65%;
    height: 100rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    box-shadow: 0px 0px 8px #ddd6d6;
  }
  .pic-title {
    width: 280rpx;
  }
  .time-box {
    overflow: auto;
    .time-line-node {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 35rpx;
      background: $self-color-light-green;
    }
    .time-line-title {
      padding-bottom: 10rpx;
      color: #333333;
    }
  }
}
</style>
